"use client";

import React, { useState, useRef, useEffect } from "react";
import { Send, Loader2 } from "lucide-react";

interface ChatInputProps {
  onSendMessage: (message: string) => void;
  isLoading?: boolean;
  placeholder?: string;
}

export function ChatInput({ 
  onSendMessage, 
  isLoading = false, 
  placeholder = "输入消息..."
}: ChatInputProps) {
  const [message, setMessage] = useState("");
  const [isFocused, setIsFocused] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // 自动调整文本区域高度
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = "auto";
      textareaRef.current.style.height = `${Math.min(
        textareaRef.current.scrollHeight,
        200
      )}px`;
    }
  }, [message]);

  // 处理消息提交
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (message.trim() && !isLoading) {
      onSendMessage(message.trim());
      setMessage("");
    }
  };

  // 处理按键事件（Ctrl+Enter 或 Command+Enter 发送消息）
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
      handleSubmit(e);
    }
  };

  return (
    <form 
      onSubmit={handleSubmit} 
      className="relative transition-all"
    >
      <div 
        className={`flex items-end border-2 rounded-xl shadow-sm 
          ${isFocused 
            ? "border-blue-400 dark:border-blue-500 shadow-md input-focus-animation" 
            : "border-slate-200 dark:border-slate-700"} 
          bg-white dark:bg-slate-800 transition-all duration-200`}
      >
        <textarea
          ref={textareaRef}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyDown={handleKeyDown}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          placeholder={placeholder}
          disabled={isLoading}
          rows={1}
          className="min-h-[56px] max-h-[200px] w-full resize-none border-0 bg-transparent px-4 py-3.5 pr-14 focus:outline-none focus:ring-0 text-slate-700 dark:text-slate-200 disabled:opacity-70 placeholder:text-slate-400 dark:placeholder:text-slate-500 text-base"
        />
        <button
          type="submit"
          disabled={!message.trim() || isLoading}
          className={`absolute bottom-2.5 right-3 rounded-full p-2 
            ${message.trim() && !isLoading 
              ? "bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white" 
              : "bg-slate-200 text-slate-400 dark:bg-slate-700 dark:text-slate-500"
            } 
            transition-all duration-200 disabled:cursor-not-allowed`}
          aria-label="发送消息"
        >
          {isLoading ? (
            <Loader2 className="h-5 w-5 animate-spin" />
          ) : (
            <Send className="h-5 w-5" />
          )}
        </button>
      </div>
      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-slate-500 dark:text-slate-400">
        <span>按</span>
        <kbd className="px-1.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 font-sans border border-slate-200 dark:border-slate-700 shadow-sm">Ctrl</kbd>
        <span>+</span>
        <kbd className="px-1.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 font-sans border border-slate-200 dark:border-slate-700 shadow-sm">Enter</kbd>
        <span>发送消息</span>
      </div>
    </form>
  );
} 